<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onChart">{{buttonText}}</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <el-col :span="3">
        <template>
          <el-select 
            v-model="hierarchyValue"
            @change="changeLevel"
            placeholder="层级">
            <el-option
              v-for="item in hierarchyList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select
            v-model="regionValue"
            multiple
            collapse-tags
            class="mySelect"
            placeholder="区域">
            <el-option
              v-for="item in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select 
            v-model="planValue"
            filterable
            placeholder="全部计划">
            <el-option
              v-for="item in planList"
              :key="item.plan_id"
              :label="item.plan_title"
              :value="item.plan_id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <template>
          <el-select v-model="typeValue"
            filterable
            clearable
            placeholder="全部考核类型">
            <el-option
              v-for="item in typeList"
              :key="item.type_name"
              :label="item.type_name"
              :value="item.type_id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="startTime"
          type="month"
          format="yyyy-MM"
          :editable="false"
          :clearable="false"
          value-format="yyyy-MM"
          placeholder="开始月">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="endTime"
          type="month"
          :editable="false"
          :clearable="false"
          format="yyyy-MM"
          value-format="yyyy-MM"
          placeholder="结束月">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="onSearch">查 询</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          v-if="isChart"
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          v-loading="loading"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table 
                ref="multiple"
                :data="props.row.details"
                :border = true
                :stripe = true 
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="60">
                </el-table-column>
                <el-table-column
                  prop="region"
                  label="区域名称" >
                </el-table-column>
                <el-table-column
                  prop="total"
                  label="任务总数" >
                </el-table-column>
                <el-table-column
                  prop="complete"
                  label="完成数" >
                </el-table-column> 
                <el-table-column
                  prop="overdue"
                  label="逾期数" >
                </el-table-column> 
                <!-- <el-table-column
                  prop="rectified"
                  label="整改数" >
                </el-table-column> --> 
                <el-table-column
                  prop="complete_rate"
                  label="完成率(%)" >
                </el-table-column> 
                <!-- <el-table-column
                  prop="rectify_rate"
                  label="整改率(%)" >
                </el-table-column>  --> 
                <el-table-column
                  prop="overdue_rate"
                  label="逾期率(%)" >
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="date"
            label="统计月份" >
          </el-table-column>
          <el-table-column
            prop="total"
            label="任务总数" >
          </el-table-column>
          <el-table-column
            prop="complete"
            label="完成数" >
          </el-table-column> 
          <el-table-column
            prop="overdue"
            label="逾期数" >
          </el-table-column> 
          <!-- <el-table-column
            prop="rectified"
            label="整改数" >
          </el-table-column>  -->
          <el-table-column
            prop="complete_rate"
            label="完成率(%)" >
          </el-table-column> 
          <!-- <el-table-column
            prop="rectify_rate"
            label="整改率(%)" >
          </el-table-column> -->  
          <el-table-column
            prop="overdue_rate"
            label="逾期率(%)" >
          </el-table-column>
        </el-table>
        <vue-highcharts v-else :Highcharts="Highcharts" :options="option" ref="visitorChart" style="height: 600px"></vue-highcharts>
      </el-col>
    </el-row>
  </div>
</template>

<style>
  .mySelect .el-input__inner,.mySelect .el-select__tags{
    height: 40px !important;
    overflow: hidden;
  }
  .mySelect.el-select .el-tag{
    margin: 8px 0 3px 6px !important;
  }
</style>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    /*width: 90px;*/
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    /*width: 50%;*/
  }
</style>

<script>
    import VueHighcharts from 'vue2-highcharts';
    import Highcharts from  "highcharts";  
    import { getPlanList , getTypeList , getCompletion } from "@/api/quality";
    import { getLevelArea } from "@/api/area";
    export default {
    data(){
        return{  
          title:"完成情况",   
          loading:false,
          hierarchyValue:1,
          hierarchyList:[
            {value:1,label:"集团"},
            {value:2,label:"片区"},
            {value:3,label:"小区"},
          ],
          regionValue:[],
          regionList:[],
          planValue:"",
          planList:[],
          typeValue:"",
          typeList:[],

          regionOptions: [],
          regionOptSelected: [],
          list:[],
          isChart:true,
          buttonText:'图表',
          startTime:(new Date().getFullYear())+'-'+('01'),
          endTime:(new Date().getFullYear())+'-'+('12'),
          Highcharts: Highcharts,
          option:{
            chart: {
                zoomType: ''
            },
            title: {
                text: '完成情况统计'
            },
            subtitle: {
                text: ''
            },
            credits:{
                  enabled: false  
            },
            colors:[
                '#ffa92e',
                '#00c2a9',
                '#2eb3ff',
                '#5db0eb',
                '#d87c7a',
                '#8698b5'
            ],
            xAxis: [
                {
                  categories: [],
                  crosshair: true
                }
            ],
            yAxis: [{ 
                labels: {
                    format: '{value}次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '次数',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
              }, { 
                title: {
                    text: '比例',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                labels: {
                    format: '{value} %',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            series: [
              {
                  name: '总数',
                  type: 'column',
                  yAxis: 0,
                  data: [],
                  tooltip: {
                      valueSuffix: '次'
                  }
              }, 
              {
                  name: '完成数',
                  type: 'column',
                  yAxis: 0,
                  data: [],
                  tooltip: {
                      valueSuffix: '次'
                  }
              },
              {
                  name: '逾期数',
                  type: 'column',
                  yAxis: 0,
                  data: [],
                  tooltip: {
                      valueSuffix: '次'
                  }
              },
              // {
              //     name: '整改数',
              //     type: 'column',
              //     yAxis: 0,
              //     data: [],
              //     tooltip: {
              //         valueSuffix: '次'
              //     }
              // },
              {
                  name: '完成率',
                  type: 'spline',
                  yAxis: 1,
                  data: [],
                  tooltip: {
                      valueSuffix: '%'
                  }
              },
              // {
              //     name: '整改率',
              //     type: 'spline',
              //     yAxis: 1,
              //     data: [],
              //     tooltip: {
              //         valueSuffix: '%'
              //     }
              // }
              {
                  name: '逾期率',
                  type: 'spline',
                  yAxis: 1,
                  data: [],
                  tooltip: {
                      valueSuffix: '%'
                  }
              }
            ],
          }
      }
    },
    created() {
        document.title=this.title; 
        this.changeLevel(1);//区域
    },
    computed: { 
    },
    components: {
      VueHighcharts 
    },
    methods:{
      changeLevel(val){
        let vm=this;
        let params={
          level:val
        }
        getLevelArea(params).then(response => {
          let res=response.data;
          vm.regionList=res;
          if(res.length>0){
            vm.regionValue=[res[0].value];
          }

          vm.ongetPlanList();//计划列表

        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetPlanList(){
        let vm=this;
        let params={
          page_num:1,
          page_size:10000
        }
        getPlanList(params).then(response => {
          let res=response.data;
          vm.planList=res.rows;
          vm.planValue=res.rows[0].plan_id||'';

          vm.ongetTypeList();

        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetTypeList(){
        let vm=this;
        let params={ 
          page_num:1,
          page_size:10000
        } 
        getTypeList(params).then(response => {
          let res=response.data;
          vm.typeList=res.rows;
          // vm.typeValue=res.rows[0].type_id||''; 

          vm.ongetCompletion();

        }).catch(error => { 
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetCompletion(){
        let vm=this,params={};
        if(vm.regionValue.length==0){
          vm.$message.info("区域不能为空！");
          return;
        }
        if(vm.startTime<vm.endTime){
          params={
            plan_id:vm.planValue,
            type_id:vm.typeValue,
            level:vm.hierarchyValue,
            region:vm.regionValue.toString(),
            start_time:vm.startTime,
            end_time:vm.endTime
          }
        }else{
          params={
            plan_id:vm.planValue,
            type_id:vm.typeValue,
            level:vm.hierarchyValue,
            region:vm.regionValue.toString(),
            start_time:vm.endTime,
            end_time:vm.startTime
          }
        }
        vm.loading=true;
        getCompletion(params).then(response => {
          let res=response.data;
          vm.list=res;
          !vm.isChart?setTimeout(function(){vm.onSetChartData()},100):'';
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      onSearch(){
        this.ongetCompletion();        
      },
      onChart(){
        let vm=this;
        vm.isChart=!vm.isChart;
        if(vm.isChart){
            vm.buttonText='图表'
        }else{
          vm.buttonText='表格'
          setTimeout(function(){vm.onSetChartData()},100);
        }
      },
      onSetChartData(){
        let vm=this,lengthNum=vm.list.length;
        let xAxisList=new Array(lengthNum);//横坐标描述
        let total=new Array(lengthNum);//总数
        let complete=new Array(lengthNum);//完成数
        let overdue=new Array(lengthNum);//逾期数
        // let rectified=new Array(lengthNum);//整改数
        let complete_rate=new Array(lengthNum);//完成率
        // let rectify_rate=new Array(lengthNum);//整改率
        let overdue_rate=new Array(lengthNum);//逾期率
        let visitorChart = vm.$refs.visitorChart;

        for(let i=0; i<lengthNum; i++){
            xAxisList[i]=vm.list[i].date;
            total[i]=vm.list[i].total;
            complete[i]=vm.list[i].complete;
            overdue[i]=vm.list[i].overdue;
            // rectified[i]=vm.list[i].rectified;
            complete_rate[i]=parseFloat(vm.list[i].complete_rate)||0;
            // rectify_rate[i]=parseFloat(vm.list[i].rectify_rate)||0;
            overdue_rate[i]=parseFloat(vm.list[i].overdue_rate)||0;
        }
        if(vm.startTime<vm.endTime){
            visitorChart.getChart().setSubtitle({text:`<div>数据采集于 ${vm.startTime} 至 ${vm.endTime}</div>`});
        }else{
            visitorChart.getChart().setSubtitle({text:`<div>数据采集于 ${vm.endTime} 至 ${vm.startTime}</div>`});
        }
        visitorChart.getChart().xAxis[0].setCategories(xAxisList);
        visitorChart.getChart().series[0].update({
            data: total
        })
        visitorChart.getChart().series[1].update({
            data: complete
        })
        visitorChart.getChart().series[2].update({
            data: overdue
        })
        // visitorChart.getChart().series[3].update({
        //     data: rectified
        // })
        visitorChart.getChart().series[3].update({
            data: complete_rate
        })
        // visitorChart.getChart().series[5].update({
        //     data: rectify_rate
        // })
        visitorChart.getChart().series[4].update({
            data: overdue_rate
        })
      },
      
    }
  }

</script>


